<template>
    <div>
        <tool-bar nav="" title='linux-desktop'></tool-bar>

        <kv label="描述">
            <el-input v-model="info.desc" chk="*"></el-input>
        </kv>
        <kv><template #k>
            <div class="k">启动命令
                <remark>docker 启动命令如下： /usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock</remark>
            </div></template>
          <el-input v-model="info.exec"></el-input>
        </kv>
        <kv label="转换">
            <el-button type="primary" @click="toText">生成 ⤵</el-button>
        </kv>

        <kv label="文件名">
          /etc/systemd/system/rsyncd.service/xxx.service
        </kv>
        <kv label="文件内容" v-if="$data.result">
            <el-input readonly type="textarea" v-model="$data.result" autosize></el-input>
        </kv>

    </div>
</template>
<script setup>
/**
 * Created by CodeGenerator
 */



defineOptions({
    name: "linux-service",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive( {
    info: {
        desc:"",
        exec:""
    },
    result: ""
});
const info = $computed(()=> $data.info );

const $props = defineProps({
    id: { type: String } ,
    action: { type: String }
});

const action_name = $computed(()=>{
    return {add: "添加", edit: "修改"}[$props.action]
});

const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);

const toText = function() {
    if (jv.chk_main() == false) {
        return;
    }

    var template = `[Unit]
Description=${$data.info.desc}
After=network-online.target firewalld.service
Wants=network-online.target

[Service]
Type=notify
Restart=always
ExecStart=${$data.info.exec}
ExecReload=/bin/kill -s HUP $MAINPID
ExecStartPost=/bin/echo 启动完成
TimeoutSec=300
RestartSec=10

[Install]
WantedBy=multi-user.target`;

    $data.result = template;
    jv.$saveData("info",$data.info);
};

onMounted(function() {
    jv.$loadData("info", v=> $data.info = v );
});

</script>

<style lang="scss" scoped>

::v-deep(.kv > .k) {
    flex: 1;
}

::v-deep(.kv > .v > :first-child) {
    max-width: unset;
}

.grid {
    position: relative;
    margin-left: 20px !important;
    margin-top: 20px !important;


    ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
        height: 100%;
    }
}

.op_column {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    align-content: space-around;
    position: relative;
    height: 100%;


    button {
        display: block;
        margin: 10px 6px;
    }

}
</style>